<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-input v-model="serviceCode" placeholder="请输入接口名称" class="mr10 input"
                              @keyup.enter="getListData"></el-input>
                    <el-button type="primary" @click="getListData(1)">查询</el-button>
                </div>
                <div class="text-right">
                    <el-button type="primary" @click="openDetail()">新建</el-button>
                </div>
            </div>
            <div class="table atomicTable mt30">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" v-loading="loading"
                               class="mt20" @row-click="openDetail">
                    <template slot="state" slot-scope="scope">
                        <span v-if="scope.row.state==1">上线</span>
                        <span v-if="scope.row.state==2">下线</span>
                    </template>
                    <template slot="operation" slot-scope="scope">
                        <el-link :underline="false" type="primary" size="small" class="mr10" v-if="scope.row.state==2"
                                 @click.stop="manage(scope.row, 1)">
                            上线
                        </el-link>
                        <el-link :underline="false" type="primary" size="small" class="mr10" v-if="scope.row.state==1"
                                 @click.stop="manage(scope.row, 2)">
                            下线
                        </el-link>
                        <el-link :underline="false" type="primary" size="small" @click.stop="manage(scope.row, 3)">删除
                        </el-link>
                    </template>
                </table-example>
                <page :data="page" v-if="page" class="mt30 page" @jumpPage="getListData"></page>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {
        data() {
            return {
                serviceCode: '',
                index: 1,
                tableData: [],
                size: 10,
                page: null,
                header: [
                    {
                        prop: 'serviceName',
                        label: '接口名称',
                        minWidth: 120,
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'serviceCode',
                        label: '接口编码',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'overtime',
                        label: '超时时间(ms)',
                        minWidth: 120,
                        align: 'left'
                    },
                    {
                        prop: 'state',
                        label: '状态',
                        minWidth: 100,
                        align: 'left'
                    },
                    {
                        prop: 'createDate',
                        label: '接口创建时间',
                        minWidth: 150,
                        align: 'left'
                    },
                    {
                        prop: 'updateDate',
                        label: '接口更新时间',
                        minWidth: 150,
                        align: 'left'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['state', 'operation'],
                loading: false
            }
        },
        created() {
            this.getListData()
        },
        methods: {
            // 获取数据列表数据
            getListData(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/EsbEncapsulation/pageData', {
                    serviceCode: this.serviceCode,
                    current: this.index,
                    size: this.size
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                    }
                    this.loading = false
                })
            },
            openDetail(row) {
                let id = row ? row.id : ''
                this.$router.push('/apiPackage/detail?id=' + id)
            },
            manage(row, type) {
                let message = '', successMsg = ''
                if (type === 1) {
                    message = '确定要上线该接口吗？'
                    successMsg = '上线成功!'
                } else if (type === 2) {
                    message = '确定要下线该接口吗？'
                    successMsg = '下线成功!'
                } else {
                    message = '确定要删除该接口吗？'
                    successMsg = '删除成功!'
                }
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbEncapsulation/manage', {
                        id: row.id,
                        type: type
                    }).then(result => {
                        if (result.success) {
                            this.getListData()
                            this.$message({
                                type: 'success',
                                message: successMsg
                            })
                        }
                    })
                }).catch(() => {
                })
                return false
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page
        }
    }
</script>

<style scoped lang="less">
    .toolbar {
        line-height: 0.4rem;
        font-size: 0.16rem;
    }
</style>
